<template>
  <div class="second_nav">
    <ul class="nav">
      <li
        @click="nav1(index+1)"
        @mouseover="onMouseOver1(index)"
        @mouseout="onMouseout1(index)"
        v-for="(item,index) of nav"
        :key="index"
      >
        <img src="../assets/image/patten.png" alt />

        <p class="white" :class="{p_color:choose==index}">{{item.name}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "show",
  data() {
    return {
      choose: 9,
      seen: false,
      nav: [
        { name: "基本陈列", href: "/linzhan/basez" },
        { name: "临时展览", href: "/linzhan/linzhan2" },
        { name: "网上展厅", href: "/linzhan/year" },
      ],
    };
  },

  methods: {
    nav1(i) {
      this.choose = i;
      this.$emit("childByvalue", this.seen);

      if (i == 1) {
        this.$router
          .push({
            path: "/linzhan/basez/:id",
            query: { orderId: "基本陈列" },
          })
          .catch((err) => {
            err;
          });
      } else if (i == 2) {
        let time = new Date();
        let year = time.getFullYear();

        this.$router
          .push({
            path: "/linzhan/line/year1/:id",
            query: { orderId: "临时展览", bool: true, lookUrl: year },
          })
          .catch((err) => {
            err;
          });
      } else if (i == 3) {
        this.$router
          .push({
            path: "/linzhan/year/:id",
            query: { orderId: "网上展厅" },
          })
          .catch((err) => {
            err;
          });
      }
    },
    onMouseOver1(i) {
      this.choose = i;
    },
    onMouseout1(i) {
      this.choose = 9;
    },
  },
  components: {},
  mounted() {},
};
</script>
<style scoped>
.second_nav {
  width: 100%;

  background: rgb(78, 104, 161);
  height: 50px;
  background: rgb(78, 104, 161);
  border-top: 5px solid rgb(0, 54, 103);
  box-sizing: border-box;
  padding: 0px 584px 0px;
  position: absolute;
  top: 100px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 10000;
  transition: height 2s linear;
  /* transition:borderTop  linear; */
}
.second_nav .nav {
  display: flex;
  /* width: 100%; */
  /* height: 30px; */
  justify-content: center;
  position: absolute;
  top: 0px;
  left: 114px;
  right: 0px;
  bottom: 0px;
  margin: auto;
}
.second_nav ul li {
  margin: 0 7px 0px;
}
.second_nav ul li:first-child img {
  display: none;
}
.second_nav .nav li p {
  font-size: 16px;
  /* width:120px; */
}
.second_nav .nav li img {
  margin-right: 15px;
}
.white {
  /* font-size:24px; */
  font-size: 14px;
  color: white;
}
.second_nav .nav li a {
  color: white;

  width: 120px;
  font-size: 18px;
  color: white;
  display: flex;
}
.second_nav .nav li {
  display: flex;
  justify-content: center;
  align-items: center;
}
li {
  list-style: none;
  text-align: center;
  cursor: pointer;
}
ul,
p {
  margin: 0px;
  padding: 0px;
}
.p_color {
  color: rgb(0, 54, 103);
}

a {
  text-decoration: none;
}
</style>